<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
      @size-change="onSizeChange"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.passName"
            placeholder="Template Name"
            clearable
            @blur="() => (dataForm.passName = dataForm.passName.trim())"
            @keyup.enter.native="{getData(); pageNo = 1;}"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.status" clearable :placeholder="$t('common.status')">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="searchPass">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button type="primary" @click="goNFC"> {{ $t('modules.pass.nfc') }} </el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button type="primary" @click="goCertificate">
            {{ $t('modules.pass.certificate') }}
          </el-button>
        </el-form-item>
        <el-form-item class="float-right">
          <el-button type="primary" @click="goTopic">Topic</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table v-loading="dataListLoading" :data="dataList" stripe class="passTable">
      <el-table-column key="src" prop="src" :label="$t('modules.pass.thumbnail')">
        <template  #default="{row} : {row: TemplateData}"
          ><img :src="baseurl + '/tempres/' + row.thumbUrl" width="60px" style="margin: 8px 0px"
        /></template>
      </el-table-column>
      <el-table-column
        key="templateName"
        prop="tempName"
        :label="$t('modules.pass.template_name')"
      />
      <el-table-column key="operator" prop="operator" :label="$t('operator.name')" />
      <el-table-column key="status" prop="status" min-width="100" :label="$t('operator.status')">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 0" size="small">
            {{$t('operator.lock_status_list[1].label')  }}
          </el-tag>
          <el-tag v-if="scope.row.status === 1" size="small" type="success">
            {{ t('flypass.in_use') }}
          </el-tag>
          <el-tag v-if="scope.row.status === 2" size="small" type="error">
            {{ t('flypass.deregistered') }}
          </el-tag>        
        </template>
      </el-table-column>
      <el-table-column key="creTime" prop="creTime" :label="$t('common.createTime')">
        <template v-slot="scope">
          <div :title="timeFilter(scope.row.tempCreateTime)">
            {{ dateFilter(scope.row.tempCreateTime) }}
            {{ scope.row.tempCreateTime ? '' : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="75px">
        <template #default="{row} : {row: TemplateData}">
          <el-dropdown class="align-middle" trigger="click">
            <el-button text class="w-8">
              <svg-icon icon-class="MoreFilled" />
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>              
                <el-dropdown-item @click="editHandle(row.tempUuid)">
                  <svg-icon icon-class="outlined-edit" />
                  {{ $t('page.edit') }}
                </el-dropdown-item>
                <el-dropdown-item @click="unRegister(row.tempUuid)" :disabled="row.status === TemplateStatus.Deregistered">
                  <svg-icon icon-class="CircleCloseFilled" />
                  {{ t('flypass.unregister') }}
                </el-dropdown-item>
                <el-dropdown-item @click="deleteHandle(row.tempUuid)" danger>
                  <svg-icon icon-class="outlined-delete" />
                  {{ $t('page.delete') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { deleteTemplate, getTemplateList, unRegisterTemplate } from '@/api/pass/template'
import { timeFilter, dateFilter } from '@/filters/index'
import TableColumnFilter from '@/components/page-setting/table-column-filter'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
import type { TemplateData } from '@/api/pass/passModel'
import { ElMessage } from '@toms/element-ui'
import { useI18n } from 'vue-i18n'

enum TemplateStatus {
  Normal,
  InUse,
  Deregistered
}

export default defineComponent({
  setup() {
    const baseurl = import.meta.env.VITE_APP_PROXY
    const { t } = useI18n()
    const dataList = ref<TemplateData[]>([])
    const dataForm =  ref({
        passName: '',
        status: '',
        operator: ''
    }) 
    const statusList = ref([{
      label: t('merchant.normal'), 
      value : TemplateStatus.Normal
    }, {
      label: t('flypass.in_use'),
      value: TemplateStatus.InUse
    }, {
      label: t('flypass.deregistered'),
      value: TemplateStatus.Deregistered
    }])
    const pageNo = ref(1)
    const pageSize = ref(10)
    const totalPage = ref(0)
    const dataListLoading = ref(false)
    return {
      dataList,
      dataForm,
      statusList,
      pageNo,
      pageSize,
      totalPage,
      dataListLoading,
      t,
      baseurl,
      TemplateStatus
    }
  },
  components: {
    Permissions,
    TableColumnFilter,
    PageTitle
  },
  mounted() {
    this.getData()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    currentChangeHandle(page) {
      this.pageNo = page
      this.getData()
    },
    onSizeChange(size: number) {
      this.pageSize = size
      this.pageNo = 1
      this.getData()
    },
    searchPass() {
      this.getData()
    },
    addPass() {
      this.$router.push('/pass-design/new')
    },
    copyHandle() {},
    logoutHandle() {},
    async unRegister(tempId: number) {
      await unRegisterTemplate(tempId)      
      ElMessage({message: this.t('common.message.operation_success'), type: 'success'})
      this.getData()
    },
    editHandle(tempUuid: number) {
      this.$router.push(`/pass-design/${tempUuid}`)
    },
    async deleteHandle(templateId: number) {
      this.dataListLoading = true
      const res = await deleteTemplate(templateId)
      this.dataListLoading = false
      if (res === 1) {
        ElMessage({
          message: this.t('common.message.operation_success'),
          type: 'success'
        })
        this.getData()
      } else if (res === 0) {
        ElMessage({
          message: 'Delete failed. Please create a new template first.',
          type: 'error'
        })
      }
    },
    designPass() {
      // this.isDesign = !this.isDesign
      //获取模板设计list
    },
    goNFC() {
      this.$router.push({ path: `/pass-center/nfc`, query: {} })
    },
    goTopic() {
      this.$router.push('/topic/all')
    },
    goCertificate() {
      this.$router.push({ path: `/pass-center/certificate`, query: {} })
    },
    async getData(){
      this.dataListLoading = true
      const res = await getTemplateList({
        pageNo: this.pageNo,
        pageSize: 10,
        tempName: this.dataForm.passName,
        status: Number(this.dataForm.status)
      })
      this.totalPage = res.rows
      this.dataListLoading = false
      this.dataList = res.data      
      
    }
  }
})
</script>
<style scoped lang="scss">
:deep(.el-table__row) {
  height: 100px; 
}
:deep(.cell) {
  height: auto;
}
</style>
